import React, { Component } from 'react';
import { Card, Button,  Modal, Form, Input, Table, Upload, Icon, DatePicker, Popconfirm } from 'antd';

import styles from './style.less';
import moment from 'moment'


const EditModal = Form.create()(
    // eslint-disable-next-line react/prefer-stateless-function
    class extends React.Component {
        state = {
            loading: false
        }

        render() {
            const formItemLayout = {
                labelCol: { span: 10 },
                wrapperCol: { span: 14 },
            }
            const { visible, onCancel, onCreate, form } = this.props
            const { getFieldDecorator } = form
            return (
                <Modal
                    visible={visible}
                    title="添加主要荣誉"
                    width='60%'
                    onCancel={onCancel}
                    onOk={onCreate}
                    style={{top: '33px'}}
                >
                    <Form className={styles.loginForm} style={{width: '85%'}}>
                        <Form.Item label="主要荣誉（奖项）名称" {...formItemLayout} required={false}>
                            {getFieldDecorator('honor_name', {
                                rules: [{ required: true, message: '请输入荣誉／奖项名称!'}],
                            })(<Input placeholder="请输入荣誉／奖项名称"/>)}
                        </Form.Item>
                        <Form.Item label="荣誉图片" {...formItemLayout} required={false}>
                            {/* {getFieldDecorator('honor_url', {
                                rules: [{ required: true, message: '请选择图片!'}],
                            })( */}
                                <Upload 
                                    name="avatar"
                                    listType="picture-card"
                                    className="avatar-uploader"
                                    showUploadList={false}
                                    action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                                >
                                    <span className={styles.antUploadTextHa}>建议图片为100kb以上的清晰图，支持jpg，jpeg，png，gif等格式。</span>
                                    <div>
                                        <Icon type={this.state.loading ? 'loading' : 'plus'} />
                                        <div className={styles.antUploadText}>添加图片</div>
                                    </div>
                                </Upload>
                            {/* // )} */}
                        </Form.Item>
                        <Form.Item label="获得时间" {...formItemLayout} required={false}>
                            {getFieldDecorator('honor_date', {
                                rules: [{ required: true, message: '请选择获得时间!'}],
                            })(<DatePicker style={{ width: '100%' }} placeholder="请选择获得时间"/>)}
                        </Form.Item>
                        <Form.Item label="颁发单位" {...formItemLayout} required={false}>
                            {getFieldDecorator('honor_unit', {
                                rules: [{ required: true, message: '请输入颁发单位!'}],
                            })(<Input placeholder="请输入颁发单位"/>)}
                        </Form.Item>
                        <Form.Item label="基本介绍" {...formItemLayout} required={false}>
                            {getFieldDecorator('honor_introduce', {
                                rules: [{ required: true, message: '请简介介绍奖项内容!'}],
                            })(<Input.TextArea rows="4" placeholder="请简介介绍奖项内容"/>)}
                        </Form.Item>
                    </Form>
                </Modal>
            )
        }
    }
)


// eslint-disable-next-line react/prefer-stateless-function
class PrincipalHonor extends Component {
    state = {
        visible: false,
        // status记录新增产品 1 或编辑产品状态 0 
        status: 1,
        // 编辑产品的key
        editKey: '',
        columns: [
            // {
            //     title: '序号',
            //     dataIndex: 'index',
            //     align: 'center',
            //     className: styles.tableColumBg,
            //     width: 70
            // },
            {
                title: '荣誉（奖项）名称',
                dataIndex: 'honor_name',
                align: 'center',
                width: 150
            },
            {
                title: '获奖时间',
                dataIndex: 'honor_date',
                align: 'center',
                render: record => (
                    <span>{moment(record).format("YYYY-MM-DD")}</span>
                ),
            },
            {
                title: '颁发单位',
                dataIndex: 'honor_unit',
                align: 'center'
            },
            {
                title: '基本介绍',
                dataIndex: 'honor_introduce',
                align: 'center'
            },
            {
                title: '荣誉图片',
                dataIndex: 'honor_url',
                align: 'center',
                render: record => (
                    <img src={record} alt="" style={{width: '120px', height: '100px'}}/>
                ),
            },
            {
                title: '操作',
                dataIndex: 'address',
                align: 'center',
                width: 85,
                render: (_, record) => (
                    <>
                        <a style={{display: 'block', marginBottom: '10px'}}
                            onClick={() => this.editShowModal(record)}
                        >编辑</a>
                        <Popconfirm
                            title="你确定要删除吗？"
                            onConfirm={() => this.deleteOptions(record)}
                            okText="是"
                            cancelText="否"
                        >
                            <a>删除</a>
                        </Popconfirm>
                    </>
                ),
            },
        ],
        showColumns: [
            {
                title: '序号',
                dataIndex: 'index',
                align: 'center',
                className: styles.tableColumBg,
                width: 70
            },
            {
                title: '荣誉（奖项）名称',
                dataIndex: 'honor_name',
                align: 'center',
                width: 150
            },
            {
                title: '获奖时间',
                dataIndex: 'honor_date',
                align: 'center',
                render: record => (
                    <span>{moment(record).format("YYYY-MM-DD")}</span>
                ),
            },
            {
                title: '颁发单位',
                dataIndex: 'honor_unit',
                align: 'center'
            },
            {
                title: '基本介绍',
                dataIndex: 'honor_introduce',
                align: 'center'
            },
            {
                title: '荣誉图片',
                dataIndex: 'honor_url',
                align: 'center',
                render: record => (
                    <img src={record} alt="" style={{width: '120px', height: '100px'}}/>
                ),
            }
        ],
    }

    // 新增产品
    createShowModal = () => {
        const { form } = this.formRef.props
        form.resetFields()
        this.setState({
            status: 1,
            visible: true
        })
    }

    // 编辑产品
    editShowModal = record => {
        this.editKey = record.key
        const { form } = this.formRef.props
        this.setState({ 
            status: 0,
            visible: true,
            editKey: record.key
        })
        form.setFieldsValue({
            ...record,
            honor_date: moment(moment(record.honor_date).format("YYYY-MM-DD")),
        })
    }

    // 删除产品
    deleteOptions = record => {
        const { deleteClick } = this.props
        deleteClick(record.key)
    }

    handleCreate = () => {
        const { form } = this.formRef.props
        const { confirm } = this.props
        // 判断编辑还是新增
        // 新增
        if (this.state.status) {
            form.validateFields((err, values) => {
                if (err) { return; }
                values.honor_date = moment(values.honor_date).valueOf()
                confirm(values, 'add')
                this.setState({ visible: false })
            })
            return;
        }
        // 编辑
        form.validateFields((err, values) => {
            if (err) {
                return;
            }
            values.honor_date = moment(values.honor_date).valueOf()
            confirm(values, 'edit', this.state.editKey)
            this.setState({ visible: false })
        })
    }

    handleCancel = () => { this.setState({ visible: false }) }

    saveFormRef = formRef => { this.formRef = formRef }


    render () {
        const { type } = this.props
        const EditHead = () => {
            if (type === 'edit') {
                return (
                    <Card
                        className={styles.basicHeadLayout}
                        bordered={false}
                    >
                        <div className={styles.headName}>六、主要荣誉</div>
                        <Button type="primary" onClick={this.createShowModal}>添加</Button>
                    </Card>
                )
            }
            return (<></>)
        }

        return (
            <div>
                <EditHead />
                <Card bordered={false} className={styles.publicContent}>
                    <Table
                        columns={ type === 'edit' ? this.state.columns : this.state.showColumns}
                        dataSource={this.props.data}
                        bordered
                        pagination={ type === 'edit' ? { defaultPageSize: 2 } : false }

                    />
                </Card>
                <EditModal 
                    wrappedComponentRef={this.saveFormRef}
                    visible={this.state.visible}
                    onCancel={this.handleCancel}
                    onCreate={this.handleCreate}
                />
            </div>
            
        )
    }
}

// eslint-disable-next-line react/prefer-stateless-function

export default PrincipalHonor